<template>
  <div class="body">
    <div class="body-top">
      <div
        class="body-top-title"
        :class="active === item.active ? 'active' : ''"
        v-for="(item, index) in titleArr"
        :key="index"
        @click="handleClick(index)"
      >
        <span>{{ item.title }}</span>
      </div>
    </div>
    <div class="body-bottom">
      <div
        v-if="
          active === 'jibenxinxi' && detailData !== null
        "
        class="body-bottom-container"
      >
        <el-scrollbar>
          <label-value
            v-for="(val, key) in baseInformation"
            v-show="key != 'geojson' && key != 'geometry'"
            :label="
              key == 'totalPrice'
                ? '项目投资（万元）'
                : key == 'planPrice'
                ? '计划完成投资（万元）'
                : key
            "
            :value="val"
            :key="key"
          />
        </el-scrollbar>
      </div>

      <div
        v-if="active === 'fujianziliao'"
        class="attachment-container"
      >
        <div
          class="left"
          v-if="currentAttachmentStageIndex !== -1"
        >
          <el-scrollbar
            v-if="propertyDetailAttachments.length"
          >
            <div
              v-for="(
                stage, index
              ) in propertyDetailAttachments.map(
                (item) => item.catalogName
              )"
              class="stage"
              :key="index"
              :class="{
                active:
                  index === currentAttachmentStageIndex
              }"
              @click="changeStageIndex(index)"
            >
              <span>{{ stage }}</span>
            </div>
          </el-scrollbar>
        </div>
        <div
          class="right"
          v-if="currentAttachmentStageIndex !== -1"
        >
          <el-scrollbar
            v-if="propertyDetailAttachments.length"
          >
            <div
              v-for="(
                item, index
              ) in propertyDetailAttachments[
                currentAttachmentStageIndex
              ].children"
              class="node"
              :key="index"
            >
              <div class="node-name">
                <div class="prefix"></div>
                <span>{{ item.catalogName }}</span>
              </div>

              <div
                v-for="(
                  childItem, childIndex
                ) in propertyDetailAttachments[
                  currentAttachmentStageIndex
                ].children[index].resourceInfo"
                class="node-child"
                :class="{ first: childIndex === 0 }"
                :key="childIndex"
                @click="attachmentItemClick(childItem)"
              >
                <el-link :title="childItem.attachmentName">
                  <i class="el-icon-notebook-2" />
                  <span>
                    {{ childItem.attachmentName }}
                  </span>
                </el-link>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>

      <el-scrollbar
        v-if="
          active === 'xiangmutupian' &&
          Object.keys(propertyDetailFlattenPictures).length
        "
      >
        <div
          v-for="item in Object.keys(
            propertyDetailFlattenPictures
          )"
          :key="item"
          class="picture"
        >
          <div class="picture-header">
            <div class="prefix"></div>
            <span class="type">{{ item }}</span>
            <span class="count"
              >共&nbsp;{{
                propertyDetailFlattenPictures[item].length
              }}&nbsp;张</span
            >
          </div>

          <div class="picture-list">
            <div
              v-for="childItem in propertyDetailFlattenPictures[
                item
              ]"
              :key="childItem.pkid"
              class="picture-list-item"
              @click="clickImageItem(childItem)"
            >
              <el-image
                :src="childItem.imageSrc"
                fit="cover"
              />

              <span class="time">{{
                formatTime(
                  childItem.releaseTime,
                  'YYYY-MM-DD'
                )
              }}</span>

              <span class="introduction">{{
                childItem.remark
              }}</span>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <el-dialog
      :visible.sync="pdfPreviewDialogVisible"
      :modal-append-to-body="false"
      :append-to-body="false"
      custom-class="pdf-preview-dialog"
      @close="onPdfPreviewDialogClose"
      :title="
        '附件资料' +
        `${
          !!pdfPreviewFileName
            ? '（' + pdfPreviewFileName + '）'
            : ''
        }`
      "
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <iframe
        id="projectPdfPreviewContainer"
        :src="pdfPreviewUrl"
      />
      <div class="pdf-page-control">
        <el-button
          type="primary"
          icon="el-icon-full-screen"
          @click="requestFullScreen"
          size="small"
        ></el-button>
        <el-button
          type="primary"
          icon="el-icon-download"
          @click="downloadPdfFile"
          size="small"
        ></el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="picturePreviewDialogVisible"
      :modal-append-to-body="false"
      :append-to-body="false"
      custom-class="picture-preview-dialog"
      @close="onPicturePreviewDialogClose"
      title="项目图片"
      width="1100px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="preview-panel">
        <div
          v-if="parentPictureIndex !== -1"
          class="preview-panel-item left"
          :class="{ full: childPictureIndex === -1 }"
        >
          <div class="picture-type">
            <div class="prefix"></div>
            <span class="type">{{
              propertyDetailPictures[parentPictureIndex]
                .pictureType
            }}</span>
          </div>

          <el-image
            class="preview-image"
            :src="
              propertyDetailPictures[parentPictureIndex]
                .imageSrc
            "
            :preview-src-list="[
              propertyDetailPictures[parentPictureIndex]
                .imageSrc
            ]"
            fit="cover"
          />

          <span class="time">{{
            propertyDetailPictures[parentPictureIndex]
              .releaseTime
          }}</span>

          <span class="introduction">{{
            propertyDetailPictures[parentPictureIndex]
              .remark
          }}</span>

          <span class="count"
            >所有图片&nbsp;&nbsp;&nbsp;共&nbsp;{{
              propertyDetailPictures.length
            }}&nbsp;张</span
          >

          <Carousel
            :ref-id="'parentCarousel'"
            :image-list="propertyDetailPictures"
            :initial-index="parentPictureIndex"
            @index-change="clickParentImageIndex"
          />
        </div>

        <div
          v-if="childPictureIndex !== -1"
          class="preview-panel-item right"
        >
          <div class="picture-type">
            <div class="prefix"></div>
            <span class="type">{{
              propertyDetailPictures.find(
                (item) =>
                  item.fileId ===
                  propertyDetailPictures[parentPictureIndex]
                    .childList[childPictureIndex].pkid
              ).pictureType
            }}</span>
          </div>

          <el-image
            class="preview-image"
            :src="
              propertyDetailPictures[parentPictureIndex]
                .childList[childPictureIndex].imageSrc
            "
            :preview-src-list="[
              propertyDetailPictures[parentPictureIndex]
                .childList[childPictureIndex].imageSrc
            ]"
            fit="cover"
          />

          <span class="time">{{
            propertyDetailPictures[parentPictureIndex]
              .childList[childPictureIndex].releaseTime
          }}</span>

          <span class="introduction">{{
            propertyDetailPictures[parentPictureIndex]
              .childList[childPictureIndex].remark
          }}</span>

          <span class="count"
            >关联图&nbsp;&nbsp;&nbsp;共&nbsp;{{
              propertyDetailPictures[parentPictureIndex]
                .childList.length
            }}&nbsp;张</span
          >

          <Carousel
            :ref-id="'childCarousel'"
            :image-list="
              propertyDetailPictures[parentPictureIndex]
                .childList
            "
            :initial-index="childPictureIndex"
            @index-change="clickChildImageIndex"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import LabelValue from './labelValue'
import TitlePrefix from '@/assets/img/title-prefix.png'
import {
  queryAllAttachment,
  queryAllPicture
} from '@/api/multiple-dataservice'
import { noticeFileDownload } from '@/api/wisdomBuild'
import Carousel from '@/components/carousel'
import { formatDatetime } from '@/utils/datetime'
import { STATIC_FILE_URL } from '@/api/config.js'

export default {
  name: 'detail',
  components: {
    LabelValue,
    Carousel
  },
  props: {
    detailData: {
      type: Object
    },
    type: {
      type: String // government, enterprise
    },
    configId: {
      type: String
    },
    configKey: {
      type: String
    }
  },
  data() {
    return {
      TitlePrefix,
      active: 'jibenxinxi',
      titleArr: [
        {
          title: '基本信息',
          active: 'jibenxinxi'
        },
        {
          title: '附件资料',
          active: 'fujianziliao'
        },
        {
          title: '项目图片',
          active: 'xiangmutupian'
        }
      ],
      baseInformation: {},
      toolData: [
        {
          label: '前期手续',
          value: 'qtsx'
        },
        {
          label: '设计文件',
          value: 'sjwj'
        },
        {
          label: '建设管理文件',
          value: 'jsglwj'
        }
      ],
      activeTool: 'qtsx',
      preProcedureList: [
        {
          label: '用地及选址意见',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXX.pdf'
            }
          ]
        },
        {
          label: '立项批复',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            }
          ]
        },
        {
          label: '可研批复',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            }
          ]
        },
        {
          label: '环评批复',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            }
          ]
        },
        {
          label: '水保批复',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            }
          ]
        },
        {
          label: '其他文件'
        }
      ],
      designFileList: [
        {
          label: '方案设计',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXX.pdf'
            }
          ]
        },
        {
          label: '初步设计',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            }
          ]
        },
        {
          label: '施工图设计',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            }
          ]
        },
        {
          label: '其他文件'
        }
      ],
      manageFileList: [
        {
          label: '建设条件',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXX.pdf'
            }
          ]
        },
        {
          label: '施工许可',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            }
          ]
        },
        {
          label: '验收资料',
          children: [
            {
              label: '文件XXXXXXXX.pdf'
            },
            {
              label: '文件XXXXXXXX.pdf'
            }
          ]
        },
        {
          label: '其他文件'
        }
      ],
      propertyDetailAttachments: [], // 属性详情附件
      propertyDetailPictures: [], // 属性详情图片
      propertyDetailFlattenPictures: {},
      currentAttachmentStageIndex: -1,
      pdfPreviewDialogVisible: false,
      pdfPreviewBlob: null,
      pdfPreviewUrl: '',
      pdfPreviewFileName: '',
      picturePreviewDialogVisible: false,
      parentPictureIndex: -1, // 父图片索引
      childPictureIndex: -1 // 子图片索引
    }
  },
  methods: {
    handleClick(index) {
      this.active = this.titleArr[index].active
    },
    toolItemClickHandle(data) {
      const { value } = data
      this.activeTool =
        this.activeTool === value ? undefined : value
      // this.clearLayerStyle() // 清除楼样式
      // console.log('toolItemClickHandle', data)
    },
    resolvePictures(list) {
      list.forEach((item) => {
        const type = item.catalogName
        if (!this.propertyDetailFlattenPictures[type]) {
          this.propertyDetailFlattenPictures[type] = []
        }
        item.pictureInfoList.forEach((picture) => {
          this.propertyDetailFlattenPictures[type].push(
            picture
          )
          this.downloadImage(picture)
        })
      })
    },
    downloadImage(e) {
      noticeFileDownload(e.fileId)
        .then((res) => {
          const reader = new FileReader()
          reader.readAsDataURL(res)
          reader.onloadend = () => {
            e.imageSrc = reader.result
            this.propertyDetailPictures.forEach((item) => {
              item.childList.forEach((child) => {
                if (child.pkid === e.fileId) {
                  child.imageSrc = reader.result
                }
              })
            })
          }
        })
        .catch((err) => {
          console.error(err)
        })
    },
    changeStageIndex(index) {
      if (this.currentAttachmentStageIndex !== index) {
        this.currentAttachmentStageIndex = index
      }
    },
    attachmentItemClick(item) {
      console.log('预览附件', item)
      this.pdfPreviewUrl =
        STATIC_FILE_URL +
        item.filePath.substring(
          item.filePath.indexOf('/upload/') +
            '/upload/'.length -
            1
        )
      this.pdfPreviewFileName = item.fileName
      this.pdfPreviewDialogVisible = true
      // noticeFileDownload(item.pkid).then((res) => {
      //   console.log(res)
      //   this.pdfPreviewBlob = res
      //   this.pdfPreviewUrl = this.getObjectURL(res)
      //   this.pdfPreviewFileName = item.fileName
      //   this.pdfPreviewDialogVisible = true
      // })
    },
    getObjectURL(file) {
      let url = null
      if (window.createObjectURL !== undefined) {
        // basic
        url = window.createObjectURL(file)
      } else if (window.webkitURL !== undefined) {
        // webkit or chrome
        try {
          url = window.webkitURL.createObjectURL(file)
        } catch (error) {}
      } else if (window.URL !== undefined) {
        // mozilla(firefox)
        try {
          url = window.URL.createObjectURL(file)
        } catch (error) {}
      }
      return url
    },
    requestFullScreen() {
      const pdfPreview = document.getElementById(
        'projectPdfPreviewContainer'
      )
      if (pdfPreview.requestFullscreen) {
        pdfPreview.requestFullscreen()
        // this.rerenderPdf()
      } else if (pdfPreview.webkitRequestFullscreen) {
        /* Safari */
        pdfPreview.webkitRequestFullscreen()
        // this.rerenderPdf()
      } else if (pdfPreview.msRequestFullscreen) {
        /* IE11 */
        pdfPreview.msRequestFullscreen()
        // this.rerenderPdf()
      }
    },
    // rerenderPdf() {
    //   document.addEventListener(
    //     'fullscreenchange',
    //     this.fullScreenChangeListener
    //   )
    // },
    // fullScreenChangeListener(e) {
    //   // document.fullscreenElement: 全屏的element
    //   if (
    //     e.target ===
    //     document.getElementById(
    //       'projectPdfPreviewContainer'
    //     )
    //   ) {
    //     setTimeout(() => {
    //       this.$refs.projectPdfPreviewRef.render()
    //       this.$refs.projectPdfScrollBar.update()
    //     }, 1000)
    //   }
    // },
    async downloadPdfFile() {
      if (window.showSaveFilePicker) {
        const fileHandler = await window
          .showSaveFilePicker({
            suggestedName: this.pdfPreviewFileName,
            types: [
              {
                description: 'PDF',
                accept: {
                  'application/pdf': ['.pdf']
                }
              }
            ]
          })
          .catch((err) => {
            console.error(err)
          })
        if (fileHandler) {
          const writable =
            await fileHandler.createWritable()
          await writable
            // .write(this.pdfPreviewBlob)
            .write(this.pdfPreviewUrl)
            .then(() => {
              this.$message.success('下载成功')
            })
            .catch((err) => {
              console.error(err)
              this.$message.error('下载失败')
            })
            .finally(() => {
              writable.close()
            })
        }
      } else {
        const a = document.createElement('a')
        a.href = this.pdfPreviewUrl
        a.download = this.pdfPreviewFileName
        a.style.display = 'none'
        document.body.appendChild(a)
        a.click()
        a.remove()
      }
    },
    onPdfPreviewDialogClose() {
      this.pdfPreviewDialogVisible = false
      this.pdfPreviewBlob = null
      this.pdfPreviewUrl = ''
      this.pdfPreviewFileName = ''
    },
    clickImageItem(item) {
      if (item.childList) {
        const parentIndex =
          this.propertyDetailPictures.findIndex(
            (parent) => parent.pkid === item.pkid
          )
        this.parentPictureIndex = parentIndex
        let childPictureIndex = -1
        if (
          this.propertyDetailPictures[parentIndex]
            .childList &&
          this.propertyDetailPictures[parentIndex].childList
            .length
        ) {
          childPictureIndex = 0
        }
        this.childPictureIndex = childPictureIndex
        this.picturePreviewDialogVisible = true
      } else {
        const parentIndex =
          this.propertyDetailPictures.findIndex(
            (parent) => parent.pkid === item.parentId
          )
        let childIndex = -1
        if (
          this.propertyDetailPictures[parentIndex]
            .childList &&
          this.propertyDetailPictures[parentIndex].childList
            .length
        ) {
          childIndex = this.propertyDetailPictures[
            parentIndex
          ].children.findIndex(
            (child) => child.pkid === item.pkid
          )
        }
        this.parentPictureIndex = parentIndex
        this.childPictureIndex = childIndex
        this.picturePreviewDialogVisible = true
      }
    },
    clickParentImageIndex(index) {
      if (this.parentPictureIndex !== index) {
        this.parentPictureIndex = index

        let childPictureIndex = -1
        if (
          this.propertyDetailPictures[index].childList &&
          this.propertyDetailPictures[index].childList
            .length
        ) {
          childPictureIndex = 0
        }
        this.childPictureIndex = childPictureIndex
      }
    },
    clickChildImageIndex(index) {
      if (this.childPictureIndex !== index) {
        this.childPictureIndex = index
      }
    },
    onPicturePreviewDialogClose() {
      this.picturePreviewDialogVisible = false
      this.parentPictureIndex = -1
      this.childPictureIndex = -1
    },
    formatTime(datetime, format) {
      return formatDatetime(datetime, format)
    }
  },
  async mounted() {
    this.baseInformation = this.detailData
    this.propertyDetailAttachments = []
    this.propertyDetailPictures = []
    this.propertyDetailFlattenPictures = {}
    await queryAllAttachment({
      type: `${this.configId}--${
        this.detailData[this.configKey]
      }`
    }).then((res) => {
      if (res.success && res.data && res.data.length) {
        this.propertyDetailAttachments =
          res.data[0].children
        this.currentAttachmentStageIndex = 0
        console.log('附件', res.data[0].children)
      }
    })
    await queryAllPicture({
      type: `${this.configId}__${
        this.detailData[this.configKey]
      }`
    }).then((res) => {
      if (res.success && res.data && res.data.length) {
        this.resolvePictures(res.data[0].children)
        const tempList = []
        res.data[0].children.forEach((item) => {
          item.pictureInfoList.forEach((child) => {
            child.pictureType = item.catalogName
            tempList.push(child)
          })
        })
        this.propertyDetailPictures = tempList
        console.log('图片', res.data)
        console.log(
          'flatten',
          this.propertyDetailFlattenPictures
        )
      }
    })
    // this.currentPropertyDetailTabIndex = 0
  },
  // beforeDestroy() {
  //   document.removeEventListener(
  //     'fullscreenchange',
  //     this.fullScreenChangeListener
  //   )
  // },
  watch: {
    detailData(newVal, oldVal) {
      this.baseInformation = newVal
      if (oldVal) {
        this.propertyDetailAttachments = []
        queryAllAttachment({
          type: `${this.configId}--${
            this.detailData[this.configKey]
          }`
        }).then((res) => {
          if (res.success && res.data && res.data.length) {
            this.propertyDetailAttachments =
              res.data[0].children
            this.currentAttachmentStageIndex = 0
            console.log('附件', res.data[0].children)
          }
        })
        this.propertyDetailPictures = []
        this.propertyDetailFlattenPictures = {}
        queryAllPicture({
          type: `${this.configId}__${
            this.detailData[this.configKey]
          }`
        }).then((res) => {
          if (res.success && res.data && res.data.length) {
            this.resolvePictures(res.data[0].children)
            const tempList = []
            res.data[0].children.forEach((item) => {
              item.pictureInfoList.forEach((child) => {
                child.pictureType = item.catalogName
                tempList.push(child)
              })
            })
            this.propertyDetailPictures = tempList
            console.log('图片', res.data)
            console.log(
              'flatten',
              this.propertyDetailFlattenPictures
            )
          }
        })
      }
      // if (val && val.geojson) {
      //   try {
      //     const json = JSON.parse(
      //       val.geojson.replace('\n', '')
      //     )
      //     this.baseInformation = json.features[0].properties
      //   } catch (e) {
      //     this.baseInformation = {}
      //     console.error(e)
      //   }
      // }
    }
  }
}
</script>

<style scoped lang="scss">
.body {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  &-top {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 28px 0px;

    &-title {
      width: 114px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: 16px;
        font-weight: 400;
        margin-left: 3px;
        color: white;
      }

      &.active {
        background-image: url('~@/assets/img/project_info_item_bg.png');
        background-size: contain;
        background-repeat: no-repeat;

        span {
          color: white;
          margin-left: -10px;
        }
      }
    }
  }

  &-bottom {
    position: relative;
    flex: 1;
    width: 100%;
    overflow: hidden;
    padding: 0px 13px;

    &-container {
      height: 100%;
      display: flex;
      flex-direction: column;

      ::v-deep {
        .el-scrollbar {
          height: 100%;

          &__wrap {
            overflow-x: hidden;
          }

          &__view {
            height: 100%;
          }
        }
      }

      .label-value {
        display: flex;
        align-items: flex-start;

        &:not(:last-of-type) {
          margin-bottom: 10px;
        }
      }
    }

    .el-scrollbar {
      height: 100%;
    }

    ::v-deep {
      .el-scrollbar__wrap {
        overflow-x: hidden;

        .el-scrollbar__view {
          height: 100%;
          padding: 10px;
        }
      }
    }
  }

  .attachment-container {
    display: flex;
    height: 100%;

    .left {
      display: flex;
      flex-direction: column;
      width: 117px;
      min-width: 117px;
      max-width: 117px;

      .stage {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 42px;
        cursor: pointer;
        font-size: 14px;

        &.active {
          border-left: 2px solid #00d2ff;
          background-color: rgba(46, 151, 211, 0.1);
          color: #00d2ff;
        }
      }
    }

    .right {
      flex: 1;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      background: rgba(46, 151, 211, 0.2);

      .node {
        display: flex;
        flex-direction: column;

        &:not(:last-of-type) {
          margin-bottom: 28px;
        }

        &-name {
          display: flex;
          align-items: center;

          .prefix {
            width: 4px;
            height: 12px;
            background: #2e97d3;
            border-radius: 2px;
          }

          span {
            flex: 1;
            font-size: 14px;
            font-weight: 500;
            color: #fefefe;
            margin-left: 10px;
          }
        }

        &-child {
          margin-left: 14px;
          font-size: 14px;
          font-weight: 500;

          ::v-deep {
            .el-link.el-link--default {
              width: auto;
              max-width: 100%;
              overflow-x: hidden;

              .el-link--inner {
                display: flex;
                align-items: center;
                width: 100%;

                i {
                  color: #fefefe;
                }

                span {
                  flex: 1;
                  color: #fefefe;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
          }

          &.first {
            margin-top: 20px;
          }
        }
      }
    }
  }

  .picture {
    display: flex;
    flex-direction: column;

    &-header {
      display: flex;
      align-items: center;

      .prefix {
        width: 4px;
        height: 12px;
        background: #2e97d3;
        border-radius: 2px;
      }

      .type {
        font-size: 14px;
        color: #fefefe;
        font-weight: 500;
        margin-left: 10px;
      }

      .count {
        font-size: 12px;
        color: #d2e6f0;
        margin-left: 15px;
      }
    }

    &-list {
      display: grid;
      grid-template-columns: repeat(2, auto);
      row-gap: 12px;
      column-gap: 9px;
      margin-top: 16px;
      margin-bottom: 30px;

      &-item {
        position: relative;
        width: calc((400px - 10px * 2 - 10px) / 2);
        height: 132px;
        cursor: pointer;

        .el-image {
          width: 100%;
          height: 100%;
        }

        .time {
          position: absolute;
          top: 3px;
          left: 3px;
          font-size: 12px;
          font-weight: 500;
          color: #d2e6f0;
        }

        .introduction {
          position: absolute;
          bottom: 3px;
          left: 3px;
          right: 3px;
          font-size: 12px;
          font-weight: 500;
          color: #d2e6f0;
        }
      }
    }
  }
}

.xmtp-basic {
  z-index: 1;
  cursor: pointer;
  margin: 5px;
  width: 157px;
  height: 132px;
}

.xmtp {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 20px 0px;

  &-time {
    color: #d2e6f0;
    font-size: 12px;
    margin-left: 5px;
  }

  &-item1 {
    @extend .xmtp-basic;
    background: url('../../../../assets/img/szdt-xmtp1.jpg');
    background-size: 100% 100%;
  }

  &-item2 {
    @extend .xmtp-basic;
    background: url('../../../../assets/img/szdt-xmtp2.png');
    background-size: 100% 100%;
  }

  &-item3 {
    @extend .xmtp-basic;
    background: url('../../../../assets/img/szdt-xmtp3.jpg');
    background-size: 100% 100%;
  }

  &-item4 {
    @extend .xmtp-basic;
    background: url('../../../../assets/img/szdt-xmtp4.jpeg');
    background-size: 100% 100%;
  }

  &-item5 {
    @extend .xmtp-basic;
    background: url('../../../../assets/img/szdt-xmtp5.jpeg');
    background-size: 100% 100%;
  }

  &-item6 {
    @extend .xmtp-basic;
    background: url('../../../../assets/img/szdt-xmtp6.jpeg');
    background-size: 100% 100%;
  }

  &-item7 {
    @extend .xmtp-basic;
    background: url('../../../../assets/img/szdt-xmtp7.jpeg');
    background-size: 100% 100%;
  }

  &-item8 {
    @extend .xmtp-basic;
    background: url('../../../../assets/img/szdt-xmtp8.jpeg');
    background-size: 100% 100%;
  }
}
</style>
